import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { stringify } from 'qs';
import { message } from 'antd';
import List from './components/List';
import Modal from './components/Modal';

@connect(({ loading, auth, role }) => ({ loading, auth, role }))
class Auth extends React.Component {
  static defaultProps = {
    
  };

  handleRefresh = newQuery => {
    const { location } = this.props;
    const { query, pathname } = location;

    router.push({
      pathname,
      search: stringify(
        {
          ...query,
          ...newQuery,
        },
        { arrayFormat: 'repeat' },
      ),
    });
  };

  get listProps() {
    const { auth, loading, dispatch } = this.props;
    const { list } = auth;

    return {
      dataSource: list,
      loading: loading.effects['auth/query'],
      bordered: false,
      onAdd() {
        dispatch({
          type: 'auth/showModal',
          payload: {
            modalType: 'create',
          },
        });
      },
      onEditItem: item => {
        dispatch({
          type: 'auth/showModal',
          payload: {
            modalType: 'update',
            currentItem: item,
          },
        });
      },
      onDeleteItem: id => {
        dispatch({
          type: 'auth/delete',
          payload: id,
        }).then(res => {
          if(res.code === 500){
            message.error(res.msg);
          }else{
            this.handleRefresh();
          }
        });
      },
    };
  }

//   get modalProps() {
//     const { dispatch, auth, loading } = this.props;
//     const { currentItem, modalVisible, modalType, roleList } = auth;

//     return {
//       item: modalType === 'create' ? {} : currentItem,
//       visible: modalVisible,
//       destroyOnClose: true,
//       maskClosable: false,
//       confirmLoading: loading.effects[`auth/${modalType}`],
//       title: `${modalType === 'create' ? '新建' : '编辑'}管理员`,
//       centered: true,
//       roleList,
//       onOk: data => {
//         dispatch({
//           type: `auth/${modalType}`,
//           payload: data,
//         }).then(() => {
//           this.handleRefresh();
//         });
//       },
//       onCancel() {
//         dispatch({
//           type: 'auth/hideModal',
//         });
//       },
//     };
//   }

  render() {
    return (
      <PageHeaderWrapper title={'菜单权限列表'} breadcrumb={false}>
        <List {...this.listProps} />
        {/* <Modal {...this.modalProps} /> */}
      </PageHeaderWrapper>
    );
  }
}

export default Auth;
